<template>
  <div id="member-wechat-binding-page" :style="{
    width:'100%',
    height: (this.getWinSize().height-43-this.getSafeArea().top)+'px',
    paddingTop:(this.getSafeArea().top+3+40)+'px'
  }">
    <div class="page-title" :style="{
      top:(this.getSafeArea().top+3)+'px'
    }">
      <div id="back-button" @click="$router.push('/MemberSetUp')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>微信绑定</span>
    </div>

    <div class="wechat-user-box">
      <img :src="'/static/no-wechat-binding.png'" v-if="!wechatUser.icon || wechatUser.icon.length===0">
      <div class="nickname" v-if="!wechatUser.icon || wechatUser.icon.length===0">未绑定</div>

      <img :src="wechatUser.icon" v-if="wechatUser.icon && wechatUser.icon.length>0">
      <div class="nickname" v-text="wechatUser.nickname"  v-if="wechatUser.icon && wechatUser.icon.length>0"></div>
    </div>

    <div align="center">
      <el-button  style="width: 60%; margin-top: 50px;" type="success" size="small" @click="newBinding" v-if="!wechatUser.icon || wechatUser.icon.length===0">点击绑定</el-button>
    </div>
    <div align="center">
      <el-button  style="width: 60%; margin-top: 50px;" type="danger" size="small" @click="cancelBinding" v-if="wechatUser.icon && wechatUser.icon.length>0">解除绑定</el-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import WechatLoginTools from '../tools/WechatLoginTools'

export default {
  name: 'MemberWechatBinding',
  data:function () {
    return {
      // 0.未绑定  1.已绑定
      formRule:{
        mobileSms: [
          {required: false, message: '请输入 手机验证码'},
          {validator: Vue.prototype.checkVerifyCode, trigger: ['blur','change']}
        ],
      },
      currFormData:{
        mobileSms:'',
      },
      wechatUser:{
        nickname:'',
        icon:''
      }
    }
  },
  mounted () {
    this.getBinding()
  },
  methods:{
    // 解除绑定
    cancelBinding:function () {
      let $this=this
      $this.$confirm('您确认要进行该操作吗, 是否继续?', '系统提示', {
        customClass: 'my-confirm-box',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        backType: 'warning'
      }).then(() => {
        $this.MyRequest($this.ApiDoNameMember+'Member/cancelBindingThirdUser',{},function (data) {
          $this.wechatUser={
            nickname:'',
            icon:''
          }
          $this.$forceUpdate()
        })
      }).catch(() => {

      })

    },
    // 获取绑定信息
    getBinding(){
      let $this=this
      $this.wechatUser={
        nickname:'',
        icon:''
      }
      $this.$forceUpdate()
      $this.MyRequest($this.ApiDoNameMember+'Member/getBindingThirdUser',{},function (data) {
        if (data && data.id>0){
          var sourceData = JSON.parse(data.data)
          $this.wechatUser.nickname=data.nickname
          $this.wechatUser.icon=sourceData.headimgurl
          $this.$forceUpdate()
        }
      })
    },
    // 新绑定微信
    newBinding:function () {
      let $this=this
      WechatLoginTools.getCode(function (ret) {
        var jsonData=JSON.stringify(ret)
        $this.MyRequest($this.ApiDoNameMember+'Member/bindingThirdUser',{data:jsonData},function (data) {
          $this.getBinding()
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
